import React, { useEffect, useState, useRef } from 'react'
import { Card, Row, Col, Input, Button, Table, Tag, } from 'antd';
import axios from 'axios';
import AddUser from '../../../components/AddUser';
import DeleteUser from '../../../components/DeleteUser';
import EditUser from '../../../components/EditUser';

export default function User() {
  const { Search } = Input;
  //用户列表
  const [userList, setUserList] = useState([])
  //用户名
  const [username, setUsername] = useState('')
  //分页器配置
  const [paginationOption, setPaginationOption] = useState({
    current: 1,
    defaultCurrent: 1,
    pageSizeOptions: ['2', '4', '6'],
    defaultPageSize: 2,
    total: 0,
    showSizeChanger: true,
    showTotal: (total) => `共${total}人`,
    onChange: (page, pageSize) => {
      paginationOption.defaultPageSize = pageSize
      paginationOption.current = page
      getUsers()
    },
    onShowSizeChange: (current, size) => {
      paginationOption.defaultCurrent = current
      paginationOption.defaultPageSize = size
      getUsers()
    }
  })
  let AddUserRef = useRef();
  let usernameRef = useRef()
  let deleteUserRef = useRef()
  let editUserRef = useRef()
  usernameRef.current = username

  useEffect(() => {
    getUsers()
  }, [username])

  //获取用户列表
  function getUsers() {
    axios.get(`/v1/user/getUserByLike`, {
      params: {
        pagesize: paginationOption.defaultPageSize,
        pagenum: paginationOption.current,
        username: usernameRef.current
      }
    }).then(
      (res) => {
        console.log(res);
        setUserList(res.data.data)
        setPaginationOption({ ...paginationOption, total: res.data.total })
      },
      (err) => {
        console.log(err);
      }
    )
  }
  // 搜索用户
  function userSearch(key) {
    key = key.trim()
    setUsername(() => key)
    setPaginationOption((paginationOption) => ({ ...paginationOption, current: 1 }))
  }

  //添加用户
  const addUser = () => {
    AddUserRef.current.setIsModalVisible(true);
  };

  //删除用户
  const deleteuser = (rowData) =>{
    const {ID} = rowData
    deleteUserRef.current.setIsModalVisible(true);
    deleteUserRef.current.setUserID(ID);
  }
  //修改用户
  const editUser = (rowData) =>{
    const {username} = rowData
    editUserRef.current.setIsModalVisible(true);
    // editUserRef.current.setUserID(username);
    editUserRef.current.getUser(username);
    
  }

  //表格数据配置
  const columns = [
    {
      title: 'ID',
      dataIndex: 'ID',
      key: 'ID'
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username'
    },
    {
      title: '身份',
      dataIndex: 'role',
      key: 'role',
      render: role => {
        let color = 'geekblue'
        let text = '普通用户'
        if (role === 0) {
          color = 'green'
          text = '管理员'
        }
        else if (role === 1) {
          color = 'geekblue'
        }
        else {
          color = 'red'
          text = '封禁用户'
        }

        return (
          <>
            <Tag color={color}>
              {text}
            </Tag>
          </>
        );

      }
    },
    {
      title: '管理',
      dataIndex: '',
      key: '',
      render: (record) => {
        return (
          <>
            <Button type="primary" className='margin_right' onClick={()=>editUser(record)}>修改</Button>
            <Button type="danger" onClick={()=>deleteuser(record)}>删除</Button>
          </>
        )
      }
    },

  ]

  return (
    <>
      <Card style={{}}>
        <Row gutter='20'>
          <Col span={6}>
            <Search placeholder="用户查找" onSearch={userSearch} enterButton allowClear  />
          </Col>
          <Col span={3}><Button type="primary" onClick={addUser}>添加用户</Button></Col>
        </Row>
        <Table pagination={paginationOption} columns={columns} dataSource={userList} rowKey={i => i.username} bordered />
      </Card>
      <AddUser onRef={AddUserRef} />
      <DeleteUser onRef={deleteUserRef} getUsers={getUsers} />
      <EditUser onRef={editUserRef} getUsers={getUsers} />
    </>
  )
}
